<template>
  <div>
    <h1>App 组件</h1>
    <MyTable
    :tableList="tableList"
    @deleteGoods="deleteInfo"
    >
    <template v-slot:body="scope">
      <td>&nbsp; {{scope.row.id}} &nbsp;</td>
      <td>{{scope.row.name}}</td>
      <td>{{scope.row.price}}￥</td>
      <td>
        <input type="text" v-if="scope.row.showInput" v-model="lableValue" @keyup.enter="addLabelValue(scope.row.id, scope.row.showInput)" style="width: 80px" v-focus @blur="aaa(scope.row.id)">
        <button v-else @click="addLabel(scope.row.id, 1)" style="background-color: #0077FF; color: white;">+Tage</button>
        <span v-for="(item, index) in scope.row.label" :key="index" class="labelStyle">{{item}}</span>
      </td>
      <td><button @click="deleteInfo(scope.row.id)">删除</button></td>
    </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './table.vue'
export default {
  name: 'MyApp',
  components: {
    MyTable
  },
  data() {
    return {
      tableList: [],
      showInput: false,
      lableValue: ''
    }
  },
  directives: {
    focus: ((el) => {
      el.focus()
    })
  },
  created() {
    this.getTableList()
  },
  methods: {
    aaa(id) {
      this.addLabel(id, 0)
    },
    // 获取 table 表格数据
    getTableList() {
      this.$http({
        method: 'get',
        url: '/getTableInfo'
      }).then(res => {
        // console.log(res.data.queryData)
        if(res.data.status === 200) {
          this.tableList = res.data.queryData
        } else {
          alert('数据请求失败！')
        }
      })
    },

    // 新增表格数据标签
    addTableLabel(id, value) {
      this.$http({
        method: 'POST',
        url: '/custom',
        data: {
          id: id,
          label: value
        }
      }).then(res => {
        // console.log(res.data)
        if(res.data.status === 200) {
          alert('新增成功')
        } else {
          alert('新增失败')
        }
      })
    },

    // 删除数据
    deleteInfo(id) {
      // console.log(id)
      this.$http({
        method: 'post',
        url: 'deleteItem',
        data: {
          id: id
        }
      }).then(res => {
        // console.log(res)
        if(res.data.status === 200) {
          this.getTableList()
          alert(res.data.message)
        } else {
          alert(res.data.message)
        }
      })
    },

    addLabel(id, status) {
      this.lableValue = ''
      // console.log(this.lableValue)
      // console.log(id, status)
      this.showInput = !this.showInput
      this.$http({
        method: 'POST',
        url: '/updateInput',
        data: {
          id: id,
          status: status
        }
      }).then(res => {
        // console.log(res)
        if(res.data.status === 200) return this.getTableList()
      })
    },

    addLabelValue(id) {
      // 新增标签
      // console.log(this.lableValue)
      if(this.lableValue === '') return this.addLabel(id, 1)
      this.$http({
        method: 'post',
        url: 'custom',
        data: {
          id: id,
          label: this.lableValue
        }
      }).then(res => {
        // console.log(res.data)
        if(res.data.status === 200) {
          this.lableValue = ''
          this.addLabel(id, 1)
          this.getTableList()
        } else {
          alert(res.data.message)
        }
      })
    }
  },
}
</script>

<style>
  .labelStyle{
    display: inline-block;
    padding: 2px 5px;
    background-color: yellow;
    /* color: white; */
    margin: 0 10px;
  }
</style>